<template>
  <div class="addAndEditRole base-addAndEditRole">
    <el-table
      ref="tableRef"
      :data="tableData"
      border
      stripe
      row-key="id"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="roleName" label="角色名称" />
      <el-table-column prop="roleDesc" label="角色描述" />
    </el-table>

    <el-row justify="center" style="margin: 10px 0">
      <el-button type="primary" @click="handleSaveOrBack(true)">保存</el-button>
      <el-button @click="handleSaveOrBack(false)">返回</el-button>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, useTemplateRef, nextTick } from "vue";
import Mitt from "@/mitt/index.js";
const emits = defineEmits(["sendData"]);
//从viewAll传递到的数据，用来判断当前组件的状态是添加还是编辑
const { currentShow } = defineProps(["currentShow"]);
//defineProps不支持二次解构
const { row } = currentShow;

const tableData = ref([]);
const tableRef = useTemplateRef("tableRef");

//复选框勾选的记录集合
const multipleSelection = ref([]);

//表格左侧勾选
const handleSelectionChange = (rows) => {
  multipleSelection.value = rows.map((item) => item.id);
  console.log(multipleSelection.value);
};

//左侧默认选中，传递的是每一个符合条件的对象
const toggleSelection = (row) => {
  tableRef.value.toggleRowSelection(row);
};

const handleSaveOrBack = (type) => {
  //如果是保存，调用保存的接口，否则直接返回
  if (type) {
    console.log(multipleSelection.value);
  }

  emits("sendData", {
    showComponents: "viewAll",
    type: "",
  });
};
//获取数据
const getList = () => {
  //传递过来的数据
  console.log(row);

  //通过接口筛选出来的数据需要依次调用  toggleSelection 这个函数用来默认勾选

  let res = {
    // 所有角色信息
    roleList: [
      {
        id: 1,
        roleName: "超级管理员",
        roleDesc: "ROLE_ADMIN",
        permissions: null,
        users: null,
      },
      {
        id: 2,
        roleName: "系统用户",
        roleDesc: "ROLE_USER",
        permissions: null,
        users: null,
      },
      {
        id: 3,
        roleName: "经理",
        roleDesc: "ROLE_MANAGER",
        permissions: null,
        users: null,
      },
      {
        id: 4,
        roleName: "组长",
        roleDesc: "ROLE_teamLeader",
        permissions: null,
        users: null,
      },
      {
        id: 5,
        roleName: "文员",
        roleDesc: "ROLE_CLERK",
        permissions: null,
        users: null,
      },
      {
        id: 6,
        roleName: "助理",
        roleDesc: "ROLE_ASSISTANT",
        permissions: null,
        users: null,
      },
      {
        id: 7,
        roleName: "主管",
        roleDesc: "ROLE_SUPERVISOR",
        permissions: null,
        users: null,
      },
      {
        id: 8,
        roleName: "首席执行官",
        roleDesc: "ROLE_CEO",
        permissions: null,
        users: null,
      },
      {
        id: 9,
        roleName: "首席财务官",
        roleDesc: "ROLE_CFO",
        permissions: null,
        users: null,
      },
      {
        id: 10,
        roleName: "生产经理",
        roleDesc: "ROLE_PM",
        permissions: null,
        users: null,
      },
      {
        id: 11,
        roleName: "保安队长",
        roleDesc: "ROLE_SOMANAGER",
        permissions: null,
        users: null,
      },
      {
        id: 12,
        roleName: "保安",
        roleDesc: "ROLE_SO",
        permissions: null,
        users: null,
      },
    ],
    // 当前用户所拥有的角色  要被选中
    userRoleList: [
      {
        id: 2,
        roleName: "系统用户",
        roleDesc: "ROLE_USER",
        permissions: [
          {
            id: 1,
            permissionName: "查看全部产品",
            url: "product:queryList",
            roles: null,
          },
          {
            id: 8,
            permissionName: "查看全部权限",
            url: "permission:queryList",
            roles: null,
          },
          {
            id: 9,
            permissionName: "查看单个用户",
            url: "user:query",
            roles: null,
          },
          {
            id: 10,
            permissionName: "查看全部角色",
            url: "role:queryList",
            roles: null,
          },
          {
            id: 12,
            permissionName: "查看全部订单",
            url: "order:queryList",
            roles: null,
          },
          {
            id: 13,
            permissionName: "查看单个订单",
            url: "order:query",
            roles: null,
          },
          {
            id: 16,
            permissionName: "查看全部用户",
            url: "user:queryList",
            roles: null,
          },
        ],
        users: null,
      },
    ],
  };

  tableData.value = res.roleList;
  //得到被勾选的数据id
  const checkIds = res.userRoleList.map((row) => row.id);
  // 必须使用nextTick等表格渲染完毕之后才能勾选
  nextTick(() => {
    tableData.value.forEach((item) => {
      if (checkIds.includes(item.id)) {
        toggleSelection(item);
      }
    });
  });
};

onMounted(() => {
  Mitt.emit("sendcrumbsInfo", { first: "用户管理", second: "添加角色表单" });
  getList();
});
</script>

<style lang="less" scoped></style>
